<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>垃圾图像采集</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .sidebar { width: 200px; float: left; background-color: #2a9d8f; color: white; height: 100vh; padding: 20px; }
        .content { margin-left: 220px; padding: 20px; }
        .card { background-color: #f9f9f9; padding: 20px; margin-bottom: 20px; border-radius: 5px; }
        .card h2 { margin-top: 0; }
        button { background-color: #2a9d8f; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
        button:hover { background-color: #22796b; }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>LYCHAR 智能垃圾分类系统</h2>
        <ul>
            <li>visibility 智能识别</li>
            <li>bar_chart 数据分析</li>
            <li>school 知识库</li>
            <li>stars 积分奖励</li>
            <li>person 用户管理</li>
            <li>settings 系统管理</li>
        </ul>
    </div>
    <div class="content">
        <div class="card">
            <h2>垃圾图像采集</h2>
            <div style="border: 2px dashed #ccc; height: 200px; display: flex; align-items: center; justify-content: center;">
                摄像头图像占位符
            </div>
            <button>启动摄像头</button>
            <div>
                <label for="upload">上传垃圾图像</label>
                <input type="file" id="upload">
                <button>上传图像</button>
            </div>
        </div>
        <div class="card">
            <h2>上传状态</h2>
            <p>上传的图像将显示在此处。</p>
        </div>
    </div>
</body>
</html>